<template>
  <div>
    <el-form ref="form"
             :model="form"
             label-width="150px">
      <el-form-item label="名称：">
        <el-input v-model="form.name"
                  style="width:50%"
                  maxlength="50"></el-input>
      </el-form-item>
      <el-form-item label="价格：">
        <el-input v-model="form.price"
                  style="width:50%"
                  onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"></el-input>
      </el-form-item>
      <el-form-item label="图片："
                    prop="imageUrl">
        <el-upload class="avatar-uploader"
                   :action="imageUploadUrl"
                   :show-file-list="false"
                   accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg"
                   :on-success="handleAvatarSuccess"
                   :before-upload="beforeAvatarUpload">
          <img v-if="form.imageUrl"
               :src="form.imageUrl"
               class="avatar">
          <i v-else
             class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="设备介绍：">
        <el-input type="textarea"
                  v-model="form.goodsIntroduce"
                  rows="4"
                  show-word-limit
                  maxlength="500"
                  style="width:50%"></el-input>
      </el-form-item>
      <el-form-item label="服务内容：">
        <el-input type="textarea"
                  v-model="form.content"
                  rows="4"
                  show-word-limit
                  maxlength="500"
                  style="width:50%"></el-input>
      </el-form-item>
      <el-form-item label="提示语：">
        <el-input type="textarea"
                  v-model="form.remark"
                  rows="4"
                  show-word-limit
                  maxlength="200"
                  style="width:50%"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="onSubmit"
                   style="margin-left:40%;margin-top:20px">保 存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    props: ['object'],
    data () {
      return {
        form: {
          type: 3,
          imageUrl: null
        },
        options: [],
        imageUploadUrl: this.api.appUpgradeUpload.url,

      }
    },
    methods: {
      onSubmit () {
        if (!this.form.name) {
          this.$message.warning('请填写名称')
          return
        }
        if (!this.form.price) {
          this.$message.warning('请填写价格')
          return
        }
        if (!this.form.imageUrl) {
          this.$message.warning('请上传图片')
          return
        }
        if (!this.form.goodsIntroduce) {
          this.$message.warning('请填写设备介绍')
          return
        }
        if (!this.form.content) {
          this.$message.warning('请填写服务内容')
          return
        }
        if (!this.form.remark) {
          this.$message.warning('请填写提示语')
          return
        }
        this.post(this.api.cooperationHospital.physicalExamBusinessuploadInfo, this.form).then(res => {
          if (res.data.code === '200') {
            this.$message.success(res.data.message)
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      handleAvatarSuccess (res) {
        this.form.imageUrl = res.object[0]
        this.$forceUpdate()
      },
      beforeAvatarUpload (file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isLt2M;
      },
    },
    mounted () {
      this.post(this.api.cooperationHospital.getPhysicalExamBusiness, { type: 3 }).then(res => {
        if (res.data.object.createTime) {
          this.form = res.data.object
        }
      })
    }
  };
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 98px !important;
    height: 98px !important;
    line-height: 98px !important;
    text-align: center;
  }
  .avatar {
    width: 98px !important;
    height: 98px !important;
    display: block;
  }
  .ivu-select-dropdown {
    z-index: 1000 !important;
  }
</style>
